<template>
  <div class="personal-container">
    <div class="dashboard-container">
      <div class="begin">
        <div class="avatar-section">
          <img :src="avatar" alt="User Avatar" class="user-avatar">
          <div class="user-info">
            <h2 class="user-name">{{ name }}</h2>
            <p class="user-phone">{{ phone }}</p>
          </div>
        </div>
        <div class="button-section">
          <el-button type="primary" @click="openEditInfoDialog">编辑信息</el-button>
          <el-button type="warning" @click="openChangePasswordDialog">修改密码</el-button>
        </div>
      </div>
      <hr>
      <div class="stat-grid">
        <el-card
          v-for="(item, index) in countData"
          :key="index"
          class="stat-card"
          :style="{ background: item.color, color: '#333' }"
        >
          <div class="icon" :style="{ backgroundColor: item.iconColor, color: '#fff' }">
            <i :class="item.icon" />
          </div>
          <div class="detail">
            <p class="txt">{{ item.name }}</p>
          </div>
          <div class="num">{{ item.value }}</div>
        </el-card>
      </div>
    </div>

    <el-dialog
      title="修改信息"
      :visible.sync="editInfoDialogVisible"
      width="50%"
      center
    >
      <el-form :model="editInfoForm" label-width="120px">
        <el-form-item label="ID">
          <el-input v-model="editInfoForm.id" disabled style="background-color: #f5f5f5; cursor: not-allowed;" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editInfoForm.name" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editInfoForm.phone" />
        </el-form-item>
        <el-form-item label="头像" prop="image">
          <el-upload
            action=""
            :file-list="fileList"
            list-type="picture-card"
            :auto-upload="true"
            :limit="1"
            :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i slot="default" class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl || editInfoForm.avatar" alt="">
          </el-dialog>
        </el-form-item>
        F</el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditInfo">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改密码"
      :visible.sync="changePasswordDialogVisible"
      width="30%"
      center
    >
      <el-form :model="changePasswordForm" label-width="120px">
        <el-form-item label="原密码">
          <el-input v-model="changePasswordForm.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="changePasswordForm.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="changePasswordForm.confirmPassword" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changePasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitChangePassword">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { EditInfo, Editpswd } from '@/api/personal'
import { uploadFile } from '@/api/upload'
import { getCountData } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  data() {
    return {
      editInfoDialogVisible: false,
      changePasswordDialogVisible: false,
      editInfoForm: {
        id: this.id,
        name: this.name,
        phone: this.phone,
        avatar: this.avatar
      },
      changePasswordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      countData: [
        { name: '小区数量', value: 0, icon: 'el-icon-office-building', color: '#E0F7FA', iconColor: '#00ACC1' },
        { name: '业主人数', value: 0, icon: 'el-icon-user-solid', color: '#F1F8E9', iconColor: '#8BC34A' },
        { name: '车辆总计', value: 0, icon: 'el-icon-bicycle', color: '#FFF3E0', iconColor: '#FFB74D' },
        { name: '楼栋总数', value: 0, icon: 'el-icon-s-home', color: '#EDE7F6', iconColor: '#7B1FA2' }
      ],
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['name', 'phone', 'avatar', 'id'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getCountData().then((response) => {
        if (response.code === 200) {
          this.countData[0].value = response.data.communityNum
          this.countData[1].value = response.data.ownerNum
          this.countData[2].value = response.data.vehicleNum
          this.countData[3].value = response.data.buildingNum
        }
      })
    },
    async beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.warning('上传文件大小不能超过 5MB!')
        return false
      }

      const formData = new FormData()
      formData.append('file', file)

      const response = await uploadFile(formData)

      if (response && response.data) {
        this.editInfoForm.avatar = response.data
        this.fileList = [{ name: file.name, url: response.data }]
        this.$message.success('图片上传成功')
        return false
      } else {
        this.$message.error('图片上传失败')
        return false
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove() {
      this.editInfoForm.avatar = ''
      this.fileList = []
    },
    openEditInfoDialog() {
      this.editInfoForm.id = this.id
      this.editInfoForm.name = this.name
      this.editInfoForm.phone = this.phone
      this.editInfoForm.avatar = this.avatar
      this.editInfoDialogVisible = true
    },
    openChangePasswordDialog() {
      this.changePasswordDialogVisible = true
    },
    async submitEditInfo() {
      try {
        await EditInfo(this.editInfoForm)
        this.$message.success('信息更新成功!')
        this.editInfoDialogVisible = false
        location.reload()
      } catch (error) {
        this.$message.error('更新信息失败，请重试')
      }
    },
    async submitChangePassword() {
      if (this.changePasswordForm.newPassword !== this.changePasswordForm.confirmPassword) {
        this.$message.error('新密码与确认密码不匹配！')
        return
      }
      try {
        await Editpswd(this.changePasswordForm)
        this.$message.success('密码修改成功!')
        this.changePasswordDialogVisible = false
      } catch (error) {
        this.$message.error('修改密码失败，请重试')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-container {
  margin: 20px;

  .begin {
    display: flex;
    align-items: flex-start;  // 修改为 flex-start，确保头像和信息在顶部对齐
    justify-content: space-between;
    margin-bottom: 20px;

    .avatar-section {
      display: flex;
      align-items: center;

      .user-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .user-info {
        .user-name {
          font-size: 24px;
          color: #333;
        }
        .user-phone {
          font-size: 16px;
          color: #666;
        }
      }
    }
  }

  .button-section {
    margin-top: 35px; // 给按钮增加顶部间距
    margin-right: 35px;
    display: flex; // 使用 flexbox 来排列按钮
    gap: 10px; // 按钮之间的间距
  }
}

.begin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dashboard {
  &-container {
    margin: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  }
  &-text {
    font-size: 24px;
    line-height: 1.5;
    color: #333;
    margin-left: 20px;
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  align-items: center;
  justify-items: center;
  margin-top: 50px;
}

.stat-card {
  width: 450px;
  height: 220px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
}

.detail {
  flex-grow: 1;
}

.txt {
  font-size: 20px;
  color: #333;
  margin: 1;
}

.num {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
}
</style>
